<template>
  <div class="fancy-section">
    <div class="fancy-section__title">{{ title }}</div>
    <div class="fancy-section__body">
      <div class="fancy-section-item" v-for="item in list" :key="item.id" @click="onClick(item)">
        <span>{{ item.text }}</span>
        <van-icon name="cross" v-show="closeable" @click.stop="onClose(item)" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
export interface FancySectionItem {
  id: string | number
  text: string
}

export interface FancySectionProps {
  title?: string
  list?: FancySectionItem[]
  closeable?: boolean // 是否可以关闭
}

const props = withDefaults(defineProps<FancySectionProps>(), {
  title: '离你最近',
  closeable: false
})

const emit = defineEmits(['click', 'update:list'])

function onClick(item: FancySectionItem) {
  // 触发自定义的 click 事件
  emit('click', item)
}

function onClose(item: FancySectionItem) {
  // 删除当前这项，得到一份新的 list
  const newList = props.list?.filter((aaaa) => aaaa.id !== item.id)
  emit('update:list', newList)
}
</script>

<style lang="scss" scoped>
.fancy-section__title {
  padding-left: 10px;
  font-size: 14px;
  color: #000;
}
.fancy-section__body {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
  padding-top: 10px;
}
.fancy-section-item {
  display: flex;
  align-items: center;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  border-radius: 5px;
  background-color: hsla(0, 0%, 95.7%, 0.6);

  .van-icon {
    margin-left: 5px;
    cursor: pointer;
    &:hover {
      background-color: #ccc;
    }
  }
}
</style>
